<!DOCTYPE html>
<html lang="cn" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>Big Image Sample | Beautiful Hugo</title>
<meta name="keywords" content="example, bigimg" />
<meta name="description" content="The image banners at the top of the page are refered to as &ldquo;bigimg&rdquo; in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes.">
<meta name="author" content="">
<link rel="canonical" href="https://leodesksss.gitee.io/post/2017-03-07-bigimg-sample/" />
<link crossorigin="anonymous" href="/assets/css/stylesheet.min.b9ff4cc257e914dab489bd18086151800e18f91456a5174bf28489210227a659.css" integrity="sha256-uf9MwlfpFNq0ib0YCGFRgA4Y&#43;RRWpRdL8oSJIQInplk=" rel="preload stylesheet" as="style">
<script defer crossorigin="anonymous" src="/assets/js/highlight.min.7680afc38aa6b15ddf158a4f3780b7b1f7dde7e91d26f073e6229bb7a0793c92.js" integrity="sha256-doCvw4qmsV3fFYpPN4C3sffd5&#43;kdJvBz5iKbt6B5PJI="
    onload="hljs.initHighlightingOnLoad();"></script>
<link rel="icon" href="https://leodesksss.gitee.io/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="https://leodesksss.gitee.io/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://leodesksss.gitee.io/favicon-32x32.png">
<link rel="apple-touch-icon" href="https://leodesksss.gitee.io/apple-touch-icon.png">
<link rel="mask-icon" href="https://leodesksss.gitee.io/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<meta name="generator" content="Hugo 0.87.0" />
<meta property="og:title" content="Big Image Sample" />
<meta property="og:description" content="The image banners at the top of the page are refered to as &ldquo;bigimg&rdquo; in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://leodesksss.gitee.io/post/2017-03-07-bigimg-sample/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2017-03-07T00:00:00&#43;00:00" />
<meta property="article:modified_time" content="2017-03-07T00:00:00&#43;00:00" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Big Image Sample"/>
<meta name="twitter:description" content="The image banners at the top of the page are refered to as &ldquo;bigimg&rdquo; in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes."/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position":  1 ,
      "name": "Posts",
      "item": "https://leodesksss.gitee.io/post/"
    }, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "Big Image Sample",
      "item": "https://leodesksss.gitee.io/post/2017-03-07-bigimg-sample/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Big Image Sample",
  "name": "Big Image Sample",
  "description": "The image banners at the top of the page are refered to as \u0026ldquo;bigimg\u0026rdquo; in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes.\n",
  "keywords": [
    "example", "bigimg"
  ],
  "articleBody": "The image banners at the top of the page are refered to as “bigimg” in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes.\nA single bigimg can be specified in the front matter by the following YAML:\nbigimg: [{src: \"/img/triangle.jpg\", desc: \"Triangle\"}]\rMultiple bigimgs can be specified in the front matter by the following YAML:\nbigimg: [{src: \"/img/triangle.jpg\", desc: \"Triangle\"}, {src: \"/img/sphere.jpg\", desc: \"Sphere\"}, {src: \"/img/hexagon.jpg\", desc: \"Hexagon\"}]\rAlso note that the description field is optional, and images could instead be specified by:\nbigimg: [{src: \"/img/triangle.jpg\"}, {src: \"/img/sphere.jpg\"}, {src: \"/img/hexagon.jpg\"}]\rThe above YAML array of hashes were written in “flow” style. However when generating a new page or post with hugo new post/mypost.md, hugo may interpret the archetype for bigimg in the default YAML style. Defining multiple bigimg’s complete with descriptions in this style would be specified by:\nbigimg: - {src: \"/img/triangle.jpg\", desc: \"Triangle\"}\r- {src: \"/img/sphere.jpg\", desc: \"Sphere\"}\r- {src: \"/img/hexagon.jpg\", desc: \"Hexagon\"}\rAdditional information can be found in this YAML tutorial.\n",
  "wordCount" : "191",
  "inLanguage": "cn",
  "datePublished": "2017-03-07T00:00:00Z",
  "dateModified": "2017-03-07T00:00:00Z",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://leodesksss.gitee.io/post/2017-03-07-bigimg-sample/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Beautiful Hugo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://leodesksss.gitee.io/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>
<noscript>
    <style type="text/css">
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: #1d1e20;
                --entry: #2e2e33;
                --primary: rgba(255, 255, 255, 0.84);
                --secondary: rgba(255, 255, 255, 0.56);
                --tertiary: rgba(255, 255, 255, 0.16);
                --content: rgba(255, 255, 255, 0.74);
                --hljs-bg: #2e2e33;
                --code-bg: #37383e;
                --border: #333;
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="https://leodesksss.gitee.io/" accesskey="h" title="Beautiful Hugo (Alt + H)">Beautiful Hugo</a>
            <span class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
            </span>
        </div>
        <ul id="menu">
            <li>
                <a href="https://leodesksss.gitee.io/" title="Blog">
                    <span>Blog</span>
                </a>
            </li>
            <li>
                <a href="https://leodesksss.gitee.io/" title="Samples">
                    <span>Samples</span>
                </a>
            </li>
            <li>
                <a href="https://leodesksss.gitee.io/page/about/" title="About">
                    <span>About</span>
                </a>
            </li>
            <li>
                <a href="https://leodesksss.gitee.io/tags" title="Tags">
                    <span>Tags</span>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    
    <h1 class="post-title">
      Big Image Sample
    </h1>
    <div class="post-meta">March 7, 2017
</div>
  </header> 
  <div class="post-content"><p>The image banners at the top of the page are refered to as &ldquo;bigimg&rdquo; in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes.</p>
<p>A single bigimg can be specified in the front matter by the following YAML:</p>
<pre><code>bigimg: [{src: &quot;/img/triangle.jpg&quot;, desc: &quot;Triangle&quot;}]
</code></pre><p>Multiple bigimgs can be specified in the front matter by the following YAML:</p>
<pre><code>bigimg: [{src: &quot;/img/triangle.jpg&quot;, desc: &quot;Triangle&quot;}, 
         {src: &quot;/img/sphere.jpg&quot;, desc: &quot;Sphere&quot;}, 
         {src: &quot;/img/hexagon.jpg&quot;, desc: &quot;Hexagon&quot;}]
</code></pre><p>Also note that the description field is optional, and images could instead be specified by:</p>
<pre><code>bigimg: [{src: &quot;/img/triangle.jpg&quot;}, 
         {src: &quot;/img/sphere.jpg&quot;}, 
         {src: &quot;/img/hexagon.jpg&quot;}]
</code></pre><p>The above YAML array of hashes were written in &ldquo;flow&rdquo; style. However when generating a new page or post with <code>hugo new post/mypost.md</code>, hugo may interpret the archetype for bigimg in the default YAML style. Defining multiple bigimg&rsquo;s complete with descriptions in this style would be specified by:</p>
<pre><code>bigimg: 
- {src: &quot;/img/triangle.jpg&quot;, desc: &quot;Triangle&quot;}
- {src: &quot;/img/sphere.jpg&quot;, desc: &quot;Sphere&quot;}
- {src: &quot;/img/hexagon.jpg&quot;, desc: &quot;Hexagon&quot;}
</code></pre><p>Additional information can be found <a href="https://rhnh.net/2011/01/31/yaml-tutorial/">in this YAML tutorial</a>.</p>

  </div>
  <footer class="post-footer">
    <ul class="post-tags">
      <li><a href="https://leodesksss.gitee.io/tags/example/">example</a></li>
      <li><a href="https://leodesksss.gitee.io/tags/bigimg/">bigimg</a></li>
    </ul>
  </footer>
</article>
    </main>
    <footer class="footer">
    <span>&copy; 2021 <a href="https://leodesksss.gitee.io/">Beautiful Hugo</a></span>
    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)">
    <button class="top-link" id="top-link" type="button" accesskey="g">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
            <path d="M12 6H0l6-6z" />
        </svg>
    </button>
</a>

<script>
    let menu = document.getElementById('menu')
    menu.scrollLeft = localStorage.getItem("menu-scroll-position");
    menu.onscroll = function () {
        localStorage.setItem("menu-scroll-position", menu.scrollLeft);
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
</body>

</html>
